<template>
  <div class="layout-container">
    <!-- 对话框组件 - 修正了v-model绑定 -->
    <el-dialog
      v-model="dialogVisible"
      width="600px"
      custom-class="desk-dialog"
    >
      <!-- 对话框内容保持不变 -->
      <div class="dialog-header">
        <h3>制冷剂管理</h3>
      </div>
      
      <div class="info-section">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="实验台编号">{{ currentDesk.labCode }}</el-descriptions-item>
          <el-descriptions-item label="罐子编号">{{ currentDesk.deskCode }}</el-descriptions-item>
          <el-descriptions-item label="制冷剂类型">{{ currentDesk.refrigerantType || '未投放' }}</el-descriptions-item>
          <el-descriptions-item label="当前重量">{{ currentDesk.weight }} kg</el-descriptions-item>
        </el-descriptions>
      </div>
      
      <div class="operation-section">
        <el-form :model="form" label-width="100px" label-position="left">
          <el-form-item label="操作类型">
            <el-select v-model="form.operation" placeholder="请选择操作">
              <el-option label="投放" value="deploy"></el-option>
              <el-option label="增加" value="add"></el-option>
              <el-option label="回收" value="reclaim"></el-option>
            </el-select>
          </el-form-item>
          
          <el-form-item label="制冷剂种类">
            <el-select 
              v-model="form.refrigerantType" 
              placeholder="请选择制冷剂"
              :disabled="form.operation !== 'deploy'"
            >
              <el-option label="R1" value="R1"></el-option>
              <el-option label="R2" value="R2"></el-option>
              <el-option label="R3" value="R3"></el-option>
              <el-option label="R4" value="R4"></el-option>
              <el-option label="R5" value="R5"></el-option>
            </el-select>
          </el-form-item>
          
          <el-form-item label="重量(kg)">
            <el-input 
              v-model.number="form.weight" 
              type="number"
              placeholder="请输入重量"
              min="0"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确认操作</el-button>
      </div>
    </el-dialog>

    <!-- 原有布局代码 -->
    <div class="header-section">
      <h2 class="section-title">实验室布局图</h2>
      <el-button 
        type="primary" 
        icon="el-icon-refresh" 
        @click="refreshData"
        v-if="showRefresh"
      >刷新数据</el-button>
    </div>
    
    <div class="content-wrapper">
      <div class="image-container">
        <div class="lab-map">
          <!-- 左侧区域 -->
          <div class="left-area">
            <!-- 第一行 -->
            <div class="lab-row">
              <div v-for="n in 4" 
                   :key="'A'+n" 
                   :class="['lab-cell', 'small-cell',
                           { 'reliability': n >= 3 && n <= 4 }]">
                <span>A{{n}}</span>
                <div v-if="n >= 3 && n <= 8" class="area-label">可靠性实验台</div>
                
                <!-- 小实验桌子容器 -->
                <div class="small-lab-container" v-if="n==3">
                  <div class="left-column">
                    <div v-for="i in 4" 
                         :key="'A'+n+'_'+i" 
                         class="small-lab-item"
                         @click="handleDeskClick('A'+n, i < 10 ? '0' + i : i.toString())">
                      <span>{{i < 10 ? '0' + i : i}}</span>
                    </div>
                  </div>
                </div>
                <div class="small-lab-container" v-if="n==4">
                  <div class="left-column">
                    <div v-for="i in 4" 
                         :key="'A'+n+'_'+i" 
                         class="small-lab-item"
                         @click="handleDeskClick('A'+n, i < 10 ? '0' + i : i.toString())">
                      <span>{{i < 10 ? '0' + i : i}}</span>
                    </div>
                  </div>
                  <div class="right-column">
                    <div v-for="i in 2" 
                         :key="'A'+n+'_'+(i+4)" 
                         class="small-lab-item"
                         @click="handleDeskClick('A'+n, (i+4) < 10 ? '0' + (i+4) : (i+4).toString())">
                      <span>{{i + 4 < 10 ? '0' + (i + 4) : (i + 4)}}</span>
                    </div>
                  </div>
                </div>
              </div>
              
              <div class="road"></div>
              
              <div v-for="n in 4" 
                   :key="'B'+n" 
                   :class="['lab-cell', 'small-cell',
                           { 'reliability': n >= 1 && n <= 4 }]">
                <span>A{{n+4}}</span>
                <div v-if="n >=1 && n <=4" class="area-label">可靠性实验台</div>
                
                <!-- 小实验桌子容器 -->
                <div class="small-lab-container" v-if="n>=1">
                  <div class="left-column">
                    <div v-for="i in 4" 
                         :key="'B'+n+'_'+i" 
                         class="small-lab-item"
                         @click="handleDeskClick('A'+(n+4), i < 10 ? '0' + i : i.toString())">
                      <span>{{i < 10 ? '0' + i : i}}</span>
                    </div>
                  </div>
                  <div class="right-column">
                    <div v-for="i in 2" 
                         :key="'B'+n+'_'+(i+4)" 
                         class="small-lab-item"
                         @click="handleDeskClick('A'+(n+4), (i+4) < 10 ? '0' + (i+4) : (i+4).toString())">
                      <span>{{i + 4 < 10 ? '0' + (i + 4) : (i + 4)}}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 第二行 -->
            <div class="lab-row">
              <div class="lab-cell big-cell" v-for="n in 2" 
                   :key="'C'+n"
                   :class="{
                     'liquid-impact': n === 2,
                   }">
                <span>B{{n}}</span>
                <div v-if="n === 2" class="area-label">液击实验台</div>
                <!-- 小实验桌子容器 -->
                <div class="small-lab-container" v-if="n==2">
                  <div class="lab-row-4">
                    <div v-for="i in 4" 
                         :key="'B'+n+'_'+i" 
                         class="small-lab-item"
                         @click="handleDeskClick('B'+n, i < 10 ? '0' + i : i.toString())">
                      <span>{{i < 10 ? '0' + i : i}}</span>
                    </div>
                  </div>
                </div>
              </div>
              
              <div class="road"></div>
              
              <div class="lab-cell big-cell" v-for="n in 2" 
                   :key="'D'+n"
                   :class="{
                     'unit-lab': n === 1 || n === 2
                   }">
                <span>B{{n+2}}</span>
                <div v-if="n === 1 || n === 2" class="area-label">机组实验台</div>
                <!-- 小实验桌子容器 -->
                <div class="small-lab-container" v-if="n==1">
                  <div class="left-column">
                    <div v-for="i in 2" 
                         :key="'B'+n+'_'+i" 
                         class="small-lab-item"
                         @click="handleDeskClick('B'+(n+2), i < 10 ? '0' + i : i.toString())">
                      <span>{{i < 10 ? '0' + i : i}}</span>
                    </div>
                  </div>
                </div>
                <div class="small-lab-container" v-if="n==2">
                  <div class="left-column">
                    <div v-for="i in 1" 
                         :key="'B'+n+'_'+i" 
                         class="small-lab-item"
                         @click="handleDeskClick('B'+(n+2), i < 10 ? '0' + i : i.toString())">
                      <span>{{i < 10 ? '0' + i : i}}</span>
                    </div>
                  </div>
                  <div class="right-column">
                    <div v-for="i in 2" 
                         :key="'B'+n+'_'+(i+1)" 
                         class="small-lab-item"
                         @click="handleDeskClick('B'+(n+2), (i+1) < 10 ? '0' + (i+1) : (i+1).toString())">
                      <span>{{i + 1 < 10 ? '0' + (i + 1) : (i + 1) }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 第三行 -->
            <div class="lab-row">
              <div v-for="n in 4" 
                   :key="'E'+n" 
                   :class="['lab-cell', 'small-cell', 
                           { 
                             'refrigerant': n === 1,
                             'performance': n >= 2 && n <= 4 
                           }]">
                <span>C{{n}}</span>
                <div v-if="n === 1" class="area-label">制冷剂存放区</div>
                <div v-if="n >= 2 && n <= 4" class="area-label">性能实验台</div>
                <!-- 小实验桌子容器 -->
                <div class="small-lab-container" v-if="n>=2 && n<=4">
                  <div class="left-column">
                    <div v-for="i in 1" 
                         :key="'E'+n+'_'+i" 
                         class="small-lab-item"
                         @click="handleDeskClick('C'+n, i < 10 ? '0' + i : i.toString())">
                      <span>{{i < 10 ? '0' + i : i}}</span>
                    </div>
                  </div>
                </div>
                <div class="small-lab-container" v-if="n==1">
                  <div class="left-column">
                    <div v-for="i in 6" 
                         :key="'E'+n+'_'+i" 
                         class="small-lab-item"
                         @click="handleDeskClick('C'+n, i < 10 ? '0' + i : i.toString())">
                      <span>{{i < 10 ? '0' + i : i}}</span>
                    </div>
                  </div>
                  <div class="right-column">
                    <div v-for="i in 6" 
                         :key="'B'+n+'_'+(i+6)" 
                         class="small-lab-item"
                         @click="handleDeskClick('C'+n, (i+6) < 10 ? '0' + (i+6) : (i+6).toString())">
                      <span>{{i+6 < 10 ? '0' + (i+6) : (i+6) }}</span>
                    </div>
                  </div>
                </div>
              </div>
              
              <div class="road"></div>
              
              <div v-for="n in 5" 
                   :key="'F'+n" 
                   :class="['lab-cell', 'small-cell', 
                           { 
                             'performance': n >= 1 && n <= 4 
                           }]">
                <span>C{{n+4}}</span>
                <div v-if="n >= 1 && n <= 4" class="area-label">性能实验台</div>
                <!-- 小实验桌子容器 -->
                <div class="small-lab-container" v-if="n>=1 && n<=4">
                  <div class="left-column">
                    <div v-for="i in 1" 
                         :key="'F'+n+'_'+i" 
                         class="small-lab-item"
                         @click="handleDeskClick('C'+(n+4), i < 10 ? '0' + i : i.toString())">
                      <span>{{i < 10 ? '0' + i : i}}</span>
                    </div>
                  </div>
                </div>
                <div class="small-lab-container" v-if="n==5">
                  <div class="left-column">
                    <div v-for="i in 3" 
                         :key="'F'+n+'_'+i" 
                         class="small-lab-item"
                         @click="handleDeskClick('C'+(n+4), i < 10 ? '0' + i : i.toString())">
                      <span>{{i < 10 ? '0' + i : i}}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 右侧区域 -->
          <div class="right-area">
            <!-- 第一行 -->
            <div class="right-row">
              <div class="lab-cell big-cell" style="flex:3;">
                <span>D1</span>
              </div>
              <div class="lab-cell big-cell reliability-right" style="flex:7;">
                <span>D2</span>
                <div class="area-label">可靠性测试台</div>
                <!-- D2实验室内部的小桌子布局 -->
                <div class="d2-desk-container">
                  <!-- 第一行：9个桌子 -->
                  <div class="desk-row">
                    <div v-for="i in 9" 
                         :key="'d2-1-'+i" 
                         class="small-desk-item"
                         @click="handleDeskClick('D2', i.toString().padStart(2, '0'))">
                      <span>{{ i.toString().padStart(2, '0') }}</span>
                    </div>
                  </div>
      
                  <!-- 第二行：12个桌子 -->
                  <div class="desk-row">
                    <div v-for="i in 12" 
                         :key="'d2-2-'+i" 
                         class="small-desk-item"
                         @click="handleDeskClick('D2', (i+9).toString().padStart(2, '0'))">
                      <span>{{ (i+9).toString().padStart(2, '0') }}</span>
                    </div>
                  </div>
      
                  <!-- 第三行：12个桌子 -->
                  <div class="desk-row">
                    <div v-for="i in 12" 
                         :key="'d2-3-'+i" 
                         class="small-desk-item"
                         @click="handleDeskClick('D2', (i+21).toString().padStart(2, '0'))">
                      <span>{{ (i+21).toString().padStart(2, '0') }}</span>
                    </div>
                  </div>
      
                  <!-- 第四行：6个桌子 -->
                  <div class="desk-row">
                    <div v-for="i in 6" 
                         :key="'d2-4-'+i" 
                         class="small-desk-item"
                         @click="handleDeskClick('D2', (i+33).toString().padStart(2, '0'))">
                      <span>{{ (i+33).toString().padStart(2, '0') }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 第二行 -->
            <div class="right-row">
              <div class="lab-cell big-cell noise-lab">
                <span>E1</span>
                <div class="area-label">噪声实验室</div>
              </div>
              <div class="lab-cell big-cell">
                <span>E2</span>
              </div>
              <div class="lab-cell big-cell performance-right">
                <span>E3</span>
                <div class="area-label">性能实验室</div>
                <div class="small-lab-container">
                  <div class="left-column">
                    <div v-for="i in 4" 
                         :key="'E'+i" 
                         class="small-lab-item"
                         @click="handleDeskClick('E3', (i).toString().padStart(2, '0'))">
                      <span>{{i.toString().padStart(2, '0') }}</span>
                    </div>
                  </div>
                  <div class="right-column">
                    <div v-for="i in 4" 
                         :key="'E'+(i+4)" 
                         class="small-lab-item"
                         @click="handleDeskClick('E3', (i+4).toString().padStart(2, '0'))">
                      <span>{{(i+4).toString().padStart(2, '0') }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import { ElDialog, ElButton, ElSelect, ElOption, ElInput, ElForm, ElFormItem, ElDescriptions, ElDescriptionsItem, ElMessage } from 'element-plus';
export default {
  name: 'LabLayout',
  components: {
    ElDialog,
    ElButton,
    ElSelect,
    ElOption,
    ElInput,
    ElForm,
    ElFormItem,
    ElDescriptions,
    ElDescriptionsItem
  },
  data() {
    return {
      showRefresh: true,
      dialogVisible: false,
      // 当前选中的桌子信息
      currentDesk: {
        labCode: '',
        deskCode: '',
        refrigerantType: '',
        weight: 0
      },
      // 表单数据
      form: {
        operation: '',
        refrigerantType: '',
        weight: ''
      },
      // 存储所有桌子的数据
      desksData: {}
    }
  },
  methods: {
    refreshData() {
      this.$message.success('实验室数据已刷新');
    },
    
    // 处理桌子点击事件
    handleDeskClick(labCode, deskCode) {
      const deskKey = `${labCode}-${deskCode}`;
      
      // 初始化或获取桌子数据
      if (!this.desksData[deskKey]) {
        // 使用Vue 3推荐的响应式赋值方式
        this.desksData = {
          ...this.desksData,
          [deskKey]: {
            labCode,
            deskCode,
            refrigerantType: '',
            weight: 0
          }
        };
      }
      // 设置当前桌子
      this.currentDesk = {...this.desksData[deskKey]};
      
      // 重置表单
      this.form = {
        operation: '',
        refrigerantType: '',
        weight: ''
      };
      
      // 显示对话框
      this.dialogVisible = true;
    },
    
    // 处理表单提交
    handleSubmit() {
      if (!this.form.operation) {
        this.$message.warning('请选择操作类型');
        return;
      }
      
      if (this.form.operation === 'deploy' && !this.form.refrigerantType) {
        this.$message.warning('请选择制冷剂类型');
        return;
      }
      
      if (!this.form.weight || this.form.weight <= 0) {
        this.$message.warning('请输入有效的重量');
        return;
      }
      
      const deskKey = `${this.currentDesk.labCode}-${this.currentDesk.deskCode}`;
      
      // 根据操作类型更新数据
      switch(this.form.operation) {
        case 'deploy':
          this.desksData = {
            ...this.desksData,
            [deskKey]: {
              ...this.currentDesk,
              refrigerantType: this.form.refrigerantType,
              weight: parseFloat(this.form.weight)
            }
          };
          break;
          
          case 'add':
          this.desksData = {
            ...this.desksData,
            [deskKey]: {
              ...this.currentDesk,
              weight: this.currentDesk.weight + parseFloat(this.form.weight)
            }
          };
          break;
          
          case 'reclaim':
          const newWeight = this.currentDesk.weight - parseFloat(this.form.weight);
          this.desksData = {
            ...this.desksData,
            [deskKey]: {
              ...this.currentDesk,
              weight: newWeight >= 0 ? newWeight : 0,
              refrigerantType: newWeight > 0 ? this.currentDesk.refrigerantType : ''
            }
          };
          break;
      }
      
      // 更新当前显示的数据
      this.currentDesk = {...this.desksData[deskKey]};
      ElMessage.success('操作成功');
      this.dialogVisible = false;
    }
  }
}
</script>

<style scoped>
.layout-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.header-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
}

.section-title {
  color: #303133;
  font-size: 24px;
  margin: 0;
}

.content-wrapper {
  display: flex;
  gap: 20px;
}

.image-container {
  flex: 1;
  min-height: 600px;
  background-color: #fafafa;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #dcdfe6;
  padding: 15px;
  overflow: auto;
}

/* 实验室地图样式 */
.lab-map {
  width: 100%;
  height: 100%;
  background: #f8f9fa;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  position: relative;
  display: flex;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.map-title {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  padding: 10px;
  font-weight: bold;
  background: #e3f2fd;
  border-bottom: 1px solid #bbdefb;
  z-index: 10;
}

/* 左侧区域样式 */
.left-area {
  flex: 6;
  display: flex;
  flex-direction: column;
  padding: 40px 10px 10px;
  z-index: 1;
}

/* 右侧区域样式 */
.right-area {
  flex: 4;
  display: flex;
  flex-direction: column;
  padding: 40px 10px 10px;
  border-left: 1px solid #ccc;
  z-index: 1;
}

.lab-row {
  display: flex;
  flex: 1;
  margin-bottom: 15px;
  position: relative;
}

.right-row {
  display: flex;
  flex: 1;
  margin-bottom: 15px;
}

/* 实验室单元格基本样式 */
.lab-cell {
  background: white;         
  border: 1px solid #90caf9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* 顶部对齐 */
  font-size: 14px;  
  font-weight: bold;
  color: #0d47a1;
  transition: all 0.3s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  position: relative;
  overflow: hidden;
  padding-top: 5px; /* 为标签留出空间 */
  border: 1px solid #000;
}

.lab-cell:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.small-cell {
  flex: 1;
  min-height: 140px; /* 增加高度容纳小桌子 */
  margin: 0 5px;
}

.big-cell {
  flex: 1;
  min-height: 120px;
  margin: 0 5px;
}

/* 小实验桌子容器 */
.small-lab-container {
  display: flex;
  width: 100%;
  height: 100%;
  padding-bottom: 30px; /* 为标签留出空间 */
}


.desk-row {
  display: flex;
  flex-wrap: nowrap; /* 确保不换行 */
  justify-content: flex-start; /* 左对齐 */
  margin-bottom: 3px;
  width: 
  100%;
}


.small-desk-item {
  background: #c7d8e7;
  margin: 0; /* 移除外边距 */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 10px;
  font-weight: normal;
  color: #0d47a1;
  width: 20px;
  min-width: 5px;
  height: 25px;
  min-height: 5px;
  border: 1px solid #000;
  /* 移除圆角 */
  overflow: hidden;
  white-space: nowrap;
}

/* 每3个桌子为一组 */
.small-desk-item:not(:nth-child(3n)) {
  margin-right: 0; /* 组内无空隙 */
}

/* 组之间添加空隙 */
.small-desk-item:nth-child(3n) {
  margin-right: 5px; /* 组间空隙 */
}

/* D2实验室内部的小桌子布局 */
.d2-desk-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 10px;
}

.left-column, .right-column {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  flex: 1;
  padding: 3px;
}

.lab-row-4 {
  display: flex;
  flex-direction: row;
  justify-content: space-between; /* 均匀分布 */
  align-items: center;
  flex-wrap: nowrap;
  gap: 5px;
  width: 100%;
  padding: 5px 0;
}


.small-lab-item {
  background: #c7d8e7;
  margin: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 10px;
  font-weight: normal;
  color: #0d47a1;
  width: 20px;
  min-width:5px;
  height:25px;
  min-height: 5px;
  border: 1px solid #000;
  /* border-radius: 4px; */
  overflow: hidden;
  white-space: nowrap;
}


/* 过道样式 */
.road {
  width: 15px;
  background: #f5f5f5;
  margin: 0 5px;
}

/* 区域标签样式 */
.area-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.1);
  text-align: center;
  font-size: 12px;
  padding: 2px 0;
  color: #333;
}


/* 新增对话框样式 */
.desk-dialog {
  border-radius: 8px;
  overflow: hidden;
}

.dialog-header {
  background-color: #409EFF;
  color: white;
  padding: 15px 20px;
  margin: -20px -20px 20px -20px;
}

.info-section {
  margin-bottom: 20px;
  padding: 15px;
  background: #f9f9f9;
  border-radius: 4px;
}

.operation-section {
  padding: 10px 15px;
}

.dialog-footer {
  text-align: right;
  padding: 10px 0;
  border-top: 1px solid #eee;
  margin-top: 20px;
}

/* 点击效果 */
.small-lab-item:hover, .small-desk-item:hover {
  transform: scale(1.05);
  box-shadow: 0 0 8px rgba(64, 158, 255, 0.8);
  cursor: pointer;
  z-index: 10;
}

/* 对话框背景遮罩 */
.v-modal {
  background-color: rgba(0, 0, 0, 0.5) !important;
}

/* 特定区域颜色样式 */
.reliability { background-color: #fff9c4; } /* 浅黄色 */
.liquid-impact { background-color: #658be3; } /* 浅蓝色 */
.unit-lab { background-color: #c8e6c9; } /* 浅绿色 */
.refrigerant { background-color: #e0e0e0; } /* 制冷剂存放区 */
.performance { background-color: #ffe0b2; } /* 浅橙色 */
.reliability-right { background-color: #e2bec3; } /* 浅红色 */
.noise-lab { background-color: #caabd8; } /* 浅粉色 */
.performance-right { background-color: #e0e0e0; } /* 浅灰色 */

@media (max-width: 992px) {
  .content-wrapper {
    flex-direction: column;
  }
  
  .lab-map {
    min-height: 500px;
    flex-direction: column;
  }
  
  .left-area, .right-area {
    width: 100%;
    border-left: none;
    border-bottom: 1px solid #ccc;
  }
  
  .small-lab-container {
    flex-direction: column;
  }
  
  .left-column, .right-column {
    display: flex;
    flex-direction: column;
    align-items:center;
    gap:1px;
    flex-wrap: nowrap;
    width:auto;
  }
  
  .small-lab-item {
    width: 30%;
    margin: 2px;
  }
}
</style>